<template>
	<block>
		<!-- 车款结算 -->
		<view class="settlement">
			<view class="u-flex u-row-between settlement-select">
				<view class="u-flex" @click="shows.search = true">
					<view class="u-margin-right-8">筛选</view>
					<image src="@/static/img/icon_screen_supplier@2x.png"></image>
				</view>
				<view class="u-flex" @click="handleSettlementRecord">
					<view class="u-margin-right-8">结算记录</view>
					<image src="@/static/img/icon_arrowright.png"></image>
				</view>
			</view>
			<block v-if="tableData.length>0">
				<view class="settlement-item u-margin-bottom-20" v-for="(item,index) in tableData" :key="index">
					<view class="settlement-title">
						<view class="u-flex">
							<image v-if="item.status!==0" src="@/static/img/icon-select_disabled@2x.png"></image>
							<image v-else-if="item.checked" src="@/static/img/icon_odd_numbers.png"
								@click="handleChecked(index)"></image>
							<image v-else src="@/static/img/icon_select.png" @click="handleChecked(index)"></image>
				
							<view class="u-font-28 u-margin-left-20">{{item.productInfo}}</view>
						</view>
						<view class="settlement-status">
							{{ getStatusLabel(carPaymentType, item.status) }}
						</view>
					</view>
					<u-line color="#F2F2F2" />
					<view class="settlement-body">
						<view class="u-flex u-row-between u-font-28">
							<view>交易订单号</view>
							<view style="color: #202020;">{{item.orderId}}</view>
						</view>
						<view class="u-flex u-row-between u-font-28 u-margin-top-24">
							<view>发货数量</view>
							<view style="color: #202020;">x {{item.productAmount}}</view>
						</view>
						<view class="amount">
							<view>交易订单金额</view>
							<view>￥ {{item.productSumPrice | thousands}}</view>
						</view>
					</view>
				</view>
			</block>
			<u-empty src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
				v-else margin-top="160" text="您目前还没有信息～"></u-empty>
			<view class="settlement-bottom">
				<view class="u-flex">
					<image v-if="getIsCheckAll ==='1'" src="@/static/img/icon_odd_numbers.png"
						@click="handleCheckedAll">
					</image>
					<image v-else-if="getIsCheckAll ==='2'" src="@/static/img/icon_select.png"
						@click="handleCheckedAll">
					</image>
					<image v-else-if="getIsCheckAll ==='3'" src="@/static/img/icon-select_disabled@2x.png"></image>
					<view class="u-font-28">全选</view>
					<view class="u-margin-left-40">
						<view>
							<text class="u-font-24">总计：</text>
							<text class="u-font-30" style="color: #F76260;">￥ {{getCheckTotal | thousands}}</text>
						</view>
						<view class="u-font-24" style="color: #A1A1A1;">已选 {{getCheckLength}} 项</view>
					</view>
				</view>
				<view>
					<u-button type="success" shape="circle" :custom-style="{
					'background':' #0FBD7F',
					'padding':'6px 22px',
					'height': '30px',
					'font-size':'13px'
				}" @click="handleSubmit">去结算</u-button>
				</view>

			</view>
			<u-toast ref="uToast" />
		</view>
		<u-popup @close="shows.search = false" closeable v-model="shows.search" mode="bottom" border-radius="12">
			<view class="search-title">筛选</view>
			<view class="search-form">
				<u-form :model="querys" label-position="top">
					<u-form-item  label="订单号" :border-bottom="false">
						<u-search v-model="querys.orderId" height="72" :show-action="false"
							placeholder="请输入订单号"></u-search>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="u-flex">
							<u-button class="u-flex-1 u-margin-right-10" shape="circle"
								@click="handleReset">重置</u-button>
							<u-button type="success" :custom-style="{
							'background':'#0FBDF',
							'color':'#fff'
						}" class="u-flex-1" shape="circle" @click="handleSelect">确定</u-button>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</u-popup>
		
	</block>
</template>

<script>
	import {
		getStatusLabel,
		carPaymentType
	} from '@/utils/status.js'
	import {
		addition
	} from '@/utils/compute.js'
	export default {
		data() {
			return {
				carPaymentType,
				querys: {
					current: 1,
					size: 10
				},
				shows:{
					search:false 
				},
				tableData: []
			}
		},
		computed: {
			getIsCheckAll() {
				// 1-全选  2-未被权限 3-没有可以选择的
				const nonPayment = this.tableData.find(x => {
					return x.status === 0
				})
				if (!nonPayment) return '3'

				const item = this.tableData.find(x => {
					return !x.checked && x.status !== 1
				})
				if (!item) return '1'
				return '2'
			},
			getCheckLength() {
				const list = this.tableData.filter(x => {
					return x.checked
				})
				return list.length
			},
			getCheckTotal() {
				const total = this.tableData.reduce((a, x) => {
					let productSumPrice = 0;
					if (x.checked) {
						productSumPrice = x.productSumPrice
					}
					return addition(a, productSumPrice)
				}, 0)
				return total || 0
			}
		},
		onShow() {
			this.handleSelect()
		},
		onReachBottom() {
			this.querys.current += 1;
			this.getTableList()
		},
		methods: {
			handleSettlementRecord() {
				uni.navigateTo({
					url: '/pages/settlement/recordSettlement'
				})
			},
			handleSubmit() {
				const list = this.tableData.filter(x => {
					return x.checked
				})
				if (list.length <= 0) {
					this.$toast("请选择支付项", this);
					return
				}
				uni.navigateTo({
					url: '/pages/settlement/confirmSettlement',
					success(res) {
						res.eventChannel.emit('settlementCheckeds', list)
					}
				})
			},
			handleChecked(index) {
				const item = JSON.parse(JSON.stringify(this.tableData[index]))
				if (item.checked) {
					this.$set(this.tableData[index], 'checked', false)
				} else {
					this.$set(this.tableData[index], 'checked', true)
				}
			},
			handleCheckedAll() {
				const list = JSON.parse(JSON.stringify(this.tableData))
				this.tableData = list.map(x => {
					if (this.getIsCheckAll === '1') {
						x.checked = false
					} else if (x.status === 0 && this.getIsCheckAll === '2') {
						x.checked = true
					}
					return x
				})
			},
			getTableList() {
				const params = JSON.parse(JSON.stringify(this.querys))
				const that = this
				uni.showLoading({
					title: '加载中...'
				});
				that.$api.getSettlementList(params).then(res => {
					if (params.current === 1) {
						that.tableData = res.result.records
					} else {
						that.tableData = [...that.tableData, ...res.result.records]
					}
					uni.hideLoading();
				})
			},
			handleSelect() {
				this.querys.current = 1
				this.getTableList()
				this.shows.search = false
			},
			handleReset() {
				this.querys = {
					current: 1,
					size: 10
				}
				this.getTableList()
				this.shows.search = false
			},
			getStatusLabel
		}
	}
</script>
<style scoped lang="less">
	.search-title {
		margin-top: 30rpx;
		font-weight: bold;
		color: #202020;
		font-size: 16px;
		text-align: center;
	}
	
	.search-form {
		margin: 20px;
	
		/deep/ .u-icon-wrap {
			display: none !important;
		}
	}
	.settlement {
		padding: 10px 15px 64px 15px;
		color: #666666;

		.settlement-select {
			font-size: 13px;
			margin-bottom: 8px;

			image {
				width: 16px;
				height: 16px;
			}
		}

		.settlement-item {
			background: #FFFFFF;
			box-shadow: 0px 3 4px 0px rgba(217, 226, 233, 0.38);
			border-radius: 8px;
			margin-bottom: 10px;

			.settlement-title {
				padding: 15px;
				display: flex;
				justify-content: space-between;

				image {
					width: 16px;
					height: 16px;
				}
			}

			.settlement-status {
				font-size: 14px;
				font-weight: 500;
				color: #0FBD7F;
			}
		}

		.settlement-body {
			padding: 15px;
			color: #666666;

			.amount {
				background: rgba(15, 189, 127, 0.07);
				border-radius: 5px;
				color: #0FBD7F;
				font-size: 13px;
				padding: 7px 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 12px;

				:last-child {
					font-weight: 600;
				}
			}
		}

		.settlement-bottom {
			z-index: 99;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			padding: 10px 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #666666;

			image {
				width: 16px;
				height: 16px;
				margin-right: 14px;
			}
		}
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>